<template>
	<div class="dialog-contain">
		<el-dialog
			v-model="dialogVisible"
			title="勾选要分配的角色"
			width="35%"
			align-center
			:show-close="false"
			@close="handleClose"
		>
			<template #header="{ close, titleId, titleClass }">
				<div class="my-header">
					<div :id="titleId" :class="titleClass">勾选要分配的角色</div>
					<svg-icon icon-class="close-icon" @click="close" />
				</div>
			</template>
			<div class="table-box">
				<el-table
					ref="tableRef"
					:data="tableData"
					style="width: 100%"
					:header-cell-style="headCellStyle"
					border
				>
					<el-table-column type="selection" width="55" align="center" />
					<el-table-column
						property="name"
						label="角色名称"
						align="center"
						show-overflow-tooltip
					/>
					<el-table-column
						property="roleId"
						label="角色ID"
						align="center"
						show-overflow-tooltip
					/>
				</el-table>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button size="small" @click="submitHandler" class="button_view">提 交</el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog
			v-model="msgDialog"
			width="20%"
			align-center
			:show-close="false"
			class="msg-dialog"
		>
			<div class="msg-content">
				<img src="@/assets/iconImg/finish.png" alt="" />
				<span>数据已更新</span>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button size="small" @click="msgDialog = false">OK</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, watch, nextTick } from "vue";
import { ElDialog, ElTable, ElTableColumn, ElButton } from "element-plus";
// import systemApi from "../../systemSetting.js";
import systemApi from "@/views/systemSetting/systemSetting"


// ---控制弹窗显隐参数---
let dialogVisible = ref(false);

// ---表头样式---
let headCellStyle = {
	padding: "10px 0px",
	background: "#F5F5F5",
};

// ---表格数据---
let tableData = ref([]);

// ---表格对象---
const tableRef = ref(null);

// ---弹窗关闭---
let handleClose = () => {
	tableRef.value.clearSelection();
	tableData.value = [];
	userIds.value = [];
};

//  ---数据提交---
let userIds = ref([]);
let submitHandler = async () => {
	let arr = tableRef.value.getSelectionRows().map((item) => {
		return item.roleId;
	});
	let params = {
		userIds: userIds.value,
		roleIds: arr,
	};
	let res = await systemApi.auth.updateBatchUserRole(params);
	if (res) {
		handleClose();
		dialogVisible.value = false;
		msgDialog.value = true;
		emits("submit");
	}
};

// 提示弹窗控制
let msgDialog = ref(false);

defineExpose({
	dialogVisible,
	tableData,
	userIds,
});

let emits = defineEmits("submit");

watch(tableData, (val) => {
	if (val.length) {
		val.forEach((item) => {
			if (item.chooseStatus === 1) {
				nextTick(() => {
					tableRef.value.toggleRowSelection(item, true);
				});
			}
		});
	}
});
</script>
<style lang="scss" scoped>
.dialog-contain {
	:deep(.el-dialog) {
		.el-dialog__header {
			background: #f7f7fa;
			margin-right: 0;
			padding: 15px 20px;
			.my-header {
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				.el-dialog__title {
					font-size: 16px;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: bold;
					color: #1a1a1a;
					line-height: 24px;
				}
				.svg-icon {
					position: absolute;
					right: 0%;
					width: 25px;
					height: 25px;
					cursor: pointer;
				}
			}
		}
		&.msg-dialog {
			.el-dialog__header {
				display: none;
			}
			.msg-content {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				span {
					font-size: 16px;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					color: #1a1a1a;
					line-height: 24px;
				}
			}
		}
		.el-dialog__footer {
			text-align: center;
			.el-button {
				padding: 18px 25px;
				// border: none;
				// background: #fc7018;
				span {
					font-size: 14px;
					font-family: SourceHanSansCN-Regular, SourceHanSansCN;
					// color: #ffffff;
				}
			}
		}
	}
}
</style>
